<template>
	<view style="padding: 15px;">
		<view class="ranking">
			<view class="rankingItem" v-for="(item,index) in list" :key="index" >
				<view class="rankingNum">{{++index}}</view>
				<view class="userName">{{item.userName}}</view>
				<view class="number">{{item.points}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.ranking{
		
		background: rgba(84, 108, 127, 0.1);
		margin:0 auto;
		border: 1px solid rgba(49, 56, 61, 1);
		border-radius: 10px;
		.rankingItem{
			width: calc(100% - 20px);
			height: 42px;
			display: flex;
			margin-left: 20px;
			border-bottom: 1px solid rgba(49, 56, 61, 1);
			font-family: Inter;
			font-size: 13px;
			font-weight: 500;
			.rankingNum{
				width: 15%;
				height: 42px;
				line-height: 42px;
				color: rgba(234, 214, 65, 1);
			}
			.userName{
				width: 60%;
				height: 42px;
				line-height: 42px;
				color: #fff;
				font-size: 13px;
			}
			.number{
				width: calc(25% - 20px);
				height: 42px;
				line-height: 42px;
				color: rgba(193, 227, 255, 1);
				font-size: 13px;
				margin-right: 20px;
			}
		}
		.rankingItem:last-child{
			border: none;
		}
	}
</style>